<template>
  <div class="screen-right" :class="{full: panelVisible}">
    <div class="screen-search">
      <div class="screen-search-main">
        <input v-show="!currTag" v-model="queryKey" @keyup.enter="onSearch" @focus="onFocus" class="screen-search-input" placeholder="请输入地点关键词或拼音"/>

        <div v-if="currTag" class="screen-search-main__tag">
          {{currTag}}
          <i class="iconfont el-icon-close" @click="onClearTag"></i>
        </div>
      </div>
      <i class="screen-search-close el-icon-circle-close" @click="onClear" v-show="showClose"></i>
      <img class="screen-search-query" src="@/assets/screen/ico-search.svg" @click="onSearch"/>
    </div>

    <!-- 快速搜索 -->
    <div class="quick" v-show="quickShow">
      <div class="quick-item" v-for="(item, index) in quickList" :key="index" @click="onQuickClick(item)">
        <img src="@/assets/screen/ico-build.svg" />
        <span>{{item.label}}</span>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search-result" v-if="panelVisible">
      <result-company v-if="currTag.endsWith('企业')" :tag="currTag">
        <template v-slot:item="{item, $index}">
          <div class="company-item-title" @click="onCompanyClick(item)">
            天津紫云光云际产业园有限公司
          </div>
          <div class="company-item-line">
            <div class="company-item-block">
              <div class="company-item-block__label">
                实际销售：
              </div>
              <div class="company-item-block__value">
                <span class="num">2224.5</span>
                <span class="unit">㎡</span>
              </div>
            </div>
            <div class="company-item-block">
              <div class="company-item-block__label">
                预估销售：
              </div>
              <div class="company-item-block__value">
                <span class="num">2224.5</span>
                <span class="unit">㎡</span>
              </div>
            </div>
          </div>
        </template>
      </result-company>

      <result-company v-else-if="!currTag.endsWith('企业')" :tag="currTag">
        <template v-slot:item="{item, $index}">
          <div class="company-item-title" @click="onProjectClick(item)">
            多功能修剪车厂房建设项目
          </div>
          <div class="company-item-line2">
            <div class="company-item-name">渤龙湖片区</div>
            <div class="company-item-tag danger" v-if="$index % 2 === 0">在建</div>
            <div class="company-item-tag " v-else>完工</div>
          </div>
          <div class="company-item-line">
            <div class="company-item-block">
              <div class="company-item-block__label">
                建筑规模：
              </div>
              <div class="company-item-block__value">
                <span class="num">2224.5</span>万
                <span class="unit">㎡</span>
              </div>
            </div>
          </div>
        </template>
      </result-company>
    </div>

    <screen-dialog v-bind.sync="dialog" @on-ok="onDialogOk"/>
  </div>
</template>

<script>
import resultCompany from './result-company'

import screenDialog from '@/comp/screen/dialog/screen-dialog'
import dialogMixin from '@/components/common/dialog/dialog-mixin'

import companyDetail from './detail/company-detail'
import projectDetail from './project/project-detail'

export default {
  name: 'screen-right',
  mixins: [dialogMixin],
  components: {
    resultCompany,
    screenDialog
  },
  data() {
    return {
      queryKey: '',
      quickShow: false,
      quickList: [
        {label: '房地产企业', value: 1},
        {label: '建筑业企业', value: 2},
        {label: '交运企业', value: 3},
        {label: '工程项目', value: 4},
        {label: '在售楼盘', value: 5}
      ],
      currTag: '',
      panelVisible: false,
      showClose: false
    }
  },
  methods: {
    onFocus() {
      this.showClose = true
      if(this.panelVisible) return
      this.quickShow = true
    },
    onClear() {
      this.showClose = false
      this.quickShow = false
      this.panelVisible = false
      this.queryKey = ''
    },
    onQuickClick(item) {
      this.showClose = false
      this.currTag = item.label
      this.panelVisible = true
      this.quickShow = false
    },
    onClearTag() {
      this.currTag = ''
      this.panelVisible = false
    },
    onSearch() {
      this.currTag = ''
      this.quickShow = false
      this.panelVisible = true
    },
    onCompanyClick() {
      this.setDialog({
        width: '85%',
        height: '90%',
        title: '企业详情',
        comp: companyDetail,
        props: {}
      })
    },
    onProjectClick() {
      this.setDialog({
        width: '85%',
        height: '90%',
        title: '项目详情',
        comp: projectDetail,
        props: {}
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
@import "./result";

.screen-right {
  width: 400px;
  top: 6%;
  position: absolute;
  right: 5%;
  height: auto;
  z-index: 2;

  &.full {
    height: 90%;
  }

  .screen-search {
    width: 100%;
    height: 52px;
    background: url("~@/assets/screen/search-bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 0 5px 10px 8px;
    display: flex;
    align-items: center;

    &-main {
      flex: 1;
      position: relative;
      align-items: center;
      display: flex;

      &__tag {
        display: inline-flex;
        padding: 2px 5px;
        border-radius: 3px;
        align-items: center;
        background: rgba(24, 152, 197, .3);
        margin-left: 10px;
        margin-top: 4px;

        .iconfont {
          cursor: pointer;
        }
      }
    }

    &-input {
      width: 100%;
      height: 100%;
      background: transparent;
      outline: none;
      color: #FFF;
      border: 0;
      padding: 0 20px;
      font-size: 18px;

      &::placeholder {
        color: #5B6EB2;
      }
    }

    &-close {
      color: #6AEAE1;
      font-size: 18px;
      cursor: pointer;
      margin-left: 5px;
    }

    &-query {
      width: 24px;
      height: 24px;
      margin: 0 16px;
      cursor: pointer;
    }
  }

  .quick {
    width: 100%;
    margin-left: 4px;
    display: flex;
    flex-wrap: wrap;

    &-item {
      display: flex;
      padding: 0 15px 4px;
      height: 50px;
      align-items: center;
      background: url("~@/assets/screen/tag-bg.svg") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;

      &:hover {
        background: url("~@/assets/screen/tag-bg-hover.svg") no-repeat;
        background-size: 100% 100%;
      }

      & > img {
        width: 18px;
        margin-right: 10px;
      }

      &>span {}

      & + .quick-item {
      }
    }
  }

  .search-result {
    height: calc(100% - 52px);
    background: linear-gradient(158deg, rgba(21,51,137, .7), rgba(21,51,137, .8) 71%, rgba(52,118,194, .5));
    margin-left: 6px;
    border: 1px solid #63C9E2;
    border-radius: 4px;
    transition: all .2s ease-in-out;
  }
}
</style>
